<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="" name="" value="青岛">
	<button>查询a</button>
	<input type="" name="" value="上海">
	<button>查询b</button>
	<div id="main" style="width:100%; height: 400px;"></div>
	<script type="text/javascript" src="./echarts.js"></script>
	<script type="text/javascript" src="../13AJAX/ajax.js"></script>
	<script type="text/javascript">
		 var myChart = echarts.init(document.getElementById('main'));
		let option = {
  title: {
    text: '湿度对比'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['one', 'two']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'one',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'two',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ]
};
			myChart.setOption(option)

			let btn = document.querySelectorAll('button')
			let inp = document.querySelectorAll('input')

			btn[0].onclick = function() {
				ajax({
					method: "get",
					url: "https://geoapi.qweather.com/v2/city/lookup",
					params: {
						location: inp[0].value,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						waether(res.location[0].id)
					}
				})
			}
			btn[1].onclick = function() {
				ajax({
					method: "get",
					url: "https://geoapi.qweather.com/v2/city/lookup",
					params: {
						location: inp[1].value,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						waether1(res.location[0].id1)
					}
				})
			}

			function waether(id) {
				ajax({
					method: "get",
					url: "https://devapi.qweather.com/v7/weather/7d",
					params: {
						location: id,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						if (res.code == 200) {
							option.xAxis.data = []
							option.series[0].data = []

							for (let i = 0; i < res.daily.length; i++) {
								option.xAxis.data.push(res.daily[i].fxDate)
								option.series[0].data.push(res.daily[i].humidity)
							}
							//再去渲染
							myChart.setOption(option)
						}
					}
				})
			}
			function waether1(id1) {
				ajax({
					method: "get",
					url: "https://devapi.qweather.com/v7/weather/7d",
					params: {
						location: id1,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						if (res.code == 200) {
							option.xAxis.data = []
							option.series[0].data = []

							for (let i = 0; i < res.daily.length; i++) {
								option.xAxis.data.push(res.daily[i].fxDate)
								option.series[0].data.push(res.daily[i].humidity)
							}
							//再去渲染
							myChart.setOption(option)
						}
					}
				})
			}
			
	</script>
</body>
</html>